<script setup lang="ts">
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

interface HowItWorksProps {
  badgeTitle: string;
  title: string;
  description: string;
  image: string;
}

const HowItWorksList: HowItWorksProps[] = [
  {
    badgeTitle: "添加账号",
    title: "添加两个账号进行应用迁移",
    description:
      "能添加的最大账号数和vip等级所关联,默认最大只能绑定两个账号.可开通vip或联系管理员提升",
    image: "u2u/1.png",
  },
  {
    badgeTitle: "选择源账号",
    title: "点击'选择'按钮",
    description:
      "选择希望迁移应用的源账号,点击'选择'后左侧会展示出账号下的所有应用",
    image: "u2u/4.png",
  },
  {
    badgeTitle: "选择应用",
    title: "勾选需要迁移的应用",
    description:
      "在左侧勾选要迁移的应用,支持多选",
    image: "u2u/5.png",
  },
  {
    badgeTitle: "选择目标账号",
    title: "在'批量迁移'处悬停",
    description:
      "从展示的下拉列表中选择要迁移的目标账号",
    image: "u2u/6.png",
  },
  {
    badgeTitle: "开始迁移",
    title: "点击'开始'按钮",
    description:
      "点击'开始'后自动的执行迁移操作,迁移成功后保留全部代码和元素库",
    image: "u2u/8.png",
  },
];
</script>

<template>
  <section
    id="features"
    class="container py-24 sm:py-32"
  >
    <div class="text-center mb-8">
      <h2 class="text-lg text-primary text-center mb-2 tracking-wider">
        快速开始
      </h2>

      <h2 class="text-3xl md:text-4xl text-center font-bold">
        迁移/复制应用步骤
      </h2>
    </div>

    <div class="lg:w-[80%] mx-auto relative">
      <div
        v-for="(
          { badgeTitle, title, description, image }, index
        ) in HowItWorksList"
        :key="title"
        :class="[
          'flex mb-8 items-center',
          { ' flex-row-reverse': index % 2 !== 0 },
        ]"
      >
        <Card class="h-full bg-transparent border-0 shadow-none">
          <CardHeader>
            <div class="pb-4">
              <Badge>{{ badgeTitle }}</Badge>
            </div>

            <CardTitle>
              {{ title }}
            </CardTitle>
          </CardHeader>

          <CardContent class="text-muted-foreground w-[80%]">
            {{ description }}
          </CardContent>
        </Card>

        <img
          :src="image"
          :alt="`Image describing ${title} `"
          className="w-[150px]  md:w-[350px] lg:w-[450px] mx-auto "
        />
        <div
          :class="[
            '-z-10 absolute right-0 w-44 h-72  lg:w-64 lg:h-80 rounded-full bg-primary/15 dark:bg-primary/10 blur-3xl',
            {
              'left-0': index % 2 !== 0,
            },
          ]"
        ></div>
      </div>
    </div>
  </section>
</template>
